<!--
 * @Author: 李金深 2896583081@qq.com
 * @Date: 2022-08-04 11:04:50
 * @LastEditors: 李金深 2896583081@qq.com
 * @LastEditTime: 2023-04-07 15:54:59
 * @FilePath: /uniapp_framework/src/components/customList/customList.vue
 * @Description: list 列表组件
-->
<template>
	<view class="list" @click="submit">
		<view class="flex items-center justify-between py-4 item" v-if="useSlot">
			<view class="text-base title_desc" style="width: 90vw;"
				:style="{ color: textColor, fontSize: fontSize + 'rpx' }">
				{{ title }}
			</view>
			<view>
				<slot></slot>
			</view>
			<view class="flex items-center">
				<u-icon name="arrow-right" size="32" color="#999999"></u-icon>
			</view>
		</view>
		<view class="flex items-center justify-between py-4 item" style="position: relative;" v-else
			:class="showBorder ? 'bottom_border' : ''">
			<view class="flex items-center ">
				<view class="flex items-center justify-center pr-2" v-if="icon != ''">
					<image :src="icon" mode="widthFix" :style="{ width: iconWidth + 'rpx', height: 'auto' }"></image>
				</view>
				<view class="title_desc" :style="{ color: textColor, fontSize: fontSize + 'rpx' }">{{ title }}</view>
			</view>
			<view class="flex items-center">
				<view class="text-xs text-center text-white rounded bg-primary"
					style="padding: 2rpx 4rpx;top:0rpx;right: 10rpx;min-width: 40rpx;z-index: 100;" v-if="count > 0">
					{{ count }}
				</view>
				<u-icon name="arrow-right" size="32" color="#999999"></u-icon>
			</view>
		</view>

	</view>
</template>

<script>
export default {
	name: "list",
	props: {
		title: {
			type: String,
			required: true
		},
		icon: {
			type: String,
			default: ''
		},
		url: {
			type: String,
			required: false
		},
		type: {
			type: String,
			default: 'jump'
		},
		iconWidth: {
			type: Number,
			default: 40
		},
		useSlot: {
			type: Boolean,
			default: false
		},
		textColor: {
			type: String,
			default: ""
		},
		showBorder: {
			type: Boolean,
			default: false
		},
		fontSize: {
			type: [Number, String],
			default: 30
		},
		count: {
			type: [Number, String],
			default: 0
		}
	},
	data() {
		return {

		};
	},

	created() {

	},
	methods: {
		submit() {
			this.$emit("submit", this.url)
		},
	}
}
</script>

<style lang="scss" scoped>
.bottom_border {
	border-bottom: 2rpx solid #E5E3E6;
}

.list:last-child .item {
	border: none;
}
</style>
